<template>
  <common-wrap id="issue" title="质疑" @toggle="toggle">
    <div v-if="issueData">
      <div v-for="(item, index) in issueData" :key="index" class="issue-item">
        <div class="issue-info">
          <div class="issue-user reply-item">
            <div>
              <el-avatar
                style="background: transparent"
                :size="30"
                shape="square"
                cross-origin
                :src="formatUrl(item.createUser?.headPhoto)"
              />
            </div>
            <div class="reply-item__desc">
              <div class="df-alc-jcsb">
                <div>
                  <span class="reply-name">{{ item.createUser?.name }}</span>
                  <span class="reply-time">{{ item.createTime }}</span>
                </div>
              </div>
            </div>
          </div>
          <el-row>
            <el-col :span="8" class="detail-info-item">
              <div class="detail-info__label">优先级</div>
              <div class="detail-info__content">{{ item.priorityValue }}</div>
            </el-col>
            <el-col :span="16" class="detail-info-item">
              <div class="detail-info__label">到期日</div>
              <div class="detail-info__content">
                {{ item.endTime?.substr(0, 10)
                }}<span v-if="item.timeout" class="timeout-tag">超时</span>
              </div>
            </el-col>
            <!-- <el-col :span="8" class="detail-info-item">
              <div class="detail-info__label">分类</div>
              <div class="detail-info__content">{{ item.typeValue }}</div>
            </el-col>-->
          </el-row>
          <el-row>
            <el-col class="detail-info-item">
              <div class="detail-info__label">质疑</div>
              <div class="detail-info__content">{{ item.content }}</div>
            </el-col>
          </el-row>

          <div class="reply-list">
            <div
              v-for="val in item.reply"
              :key="val.id"
              class="reply-item"
              @mouseenter="handleMouseenter(val)"
              @mouseleave="handleMouseleave"
            >
              <div>
                <el-avatar
                  style="background: transparent"
                  :size="30"
                  shape="square"
                  cross-origin
                  :src="formatUrl(val.createUser?.headPhoto)"
                />
              </div>
              <div class="reply-item__desc">
                <div class="df-alc-jcsb">
                  <div>
                    <span class="reply-name">{{ val.createUser?.name }}</span>
                    <span class="reply-time">{{ val.createTime }}</span>
                  </div>

                  <div
                    v-if="val.createUser?.uid === uid && currentReply?.id === val.id"
                    class="reply-operator"
                  >
                    <el-icon :size="20" @click="editReply(val)">
                      <edit />
                    </el-icon>
                    <!-- <el-icon :size="20" @click="delReply(val.id)">
                      <delete />
                    </el-icon>-->
                  </div>
                </div>
                <div class="reply-item__content">
                  <div v-if="showEdit && editReplyId === val.id">
                    <el-input v-model="replyEdit" type="textarea" />
                    <div class="reply-btn">
                      <el-button size="small" @click="cancelReply">取消</el-button>
                      <el-button type="primary" size="small" @click="editSubmit(val)"
                        >确认</el-button
                      >
                    </div>
                  </div>
                  <div v-else class="reply-info">
                    <span>回复：</span>
                    <span class="reply-info__content">{{ val.content }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="reply-input">
            <el-input v-model="reply" type="textarea" :autosize="{ minRows: 8 }" />
            <div class="reply-btn">
              <el-button type="primary" size="small" @click="submit(item)">回复</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </common-wrap>
</template>

<script lang="ts" setup>
import { computed, defineEmits, defineProps, ref, watchEffect } from 'vue'

import { ElMessage } from 'element-plus'

// import IssuesApi from '@/api/issues'
// import QueryApi from '@/api/query'
import CommonWrap from '@/components/CommonWrap/index.vue'

import { useUserStore } from '@/store/user'

import { formatUrl } from '@/utils/common/formatUrl'
import { useConfirm } from '@/utils/common/useConfirm'

import IBaseObj from '#/index'

const { uid } = useUserStore()

const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
})

const issueData = computed(() => props.detail?.issue)

watchEffect(() => {
  if (issueData.value) {
    issueData.value.forEach((v: IBaseObj) => {
      const timeout =
        +new Date(v?.endTime?.substr(0, 10)) - +new Date(new Date().toLocaleDateString())
      if (timeout < 0 || v.reply?.length === 0) {
        v.timeout = true
      } else {
        v.timeout = false
      }
    })
  }
})

const emits = defineEmits(['toggle', 'search'])
const toggle = (show: boolean) => {
  emits('toggle', show)
}

const reply = ref('')
const showEdit = ref(false)
const replyEdit = ref('')
const currentReply: IBaseObj = ref({})
const editReplyId = ref(-1) // 当前点击了编辑的

const handleMouseenter = (val: IBaseObj) => {
  currentReply.value = val
}

const handleMouseleave = () => {
  if (showEdit.value) {
    return
  }
  currentReply.value = {}
  showEdit.value = false
}

const submit = async (val: any) => {
  const ret = await QueryApi.saveQueryReply({
    qid: val.qid,
    content: reply.value,
  })
  if (ret) {
    reply.value = ''
    ElMessage({ message: '回复成功！', type: 'success' })
    emits('search')
  }
}

const editReply = (val: IBaseObj) => {
  replyEdit.value = val.content
  showEdit.value = true
  editReplyId.value = val.id
}

const editSubmit = async (val: IBaseObj) => {
  const ret = await QueryApi.saveQueryReply({
    id: val.id,
    content: replyEdit.value,
  })
  if (ret) {
    ElMessage({ message: '修改成功！', type: 'success' })
    currentReply.value.reply = replyEdit.value
    showEdit.value = false
    emits('search')
    // emits('search-reply')
  }
}

const cancelReply = () => {
  replyEdit.value = ''
  showEdit.value = false
}

const delReply = (id: number) => {
  useConfirm(
    {
      message: '是否删除该回复？',
    },
    async () => {
      const ret = await IssuesApi.deleteReply(id)
      if (ret) {
        ElMessage({ message: '删除成功！', type: 'success' })
        emits('search')
        // emits('search-reply')
      }
    }
  )
}
</script>

<style lang="scss" scoped>
.reply {
  &-list {
    margin: 10px 0;
  }

  &-item {
    display: flex;
    padding-bottom: 10px;
    margin-bottom: 10px;
    // cursor: pointer;

    &__content {
      margin-top: 3px;
    }

    &__desc {
      flex: 1;
      margin-left: 10px;
    }

    &:hover {
      .reply-operator {
        display: block;
      }
    }
  }

  &-name {
    margin-right: 10px;
    font-weight: 600;
  }

  &-time {
    font-size: 13px;
    color: var(--color-2);
  }

  &-btn {
    margin-top: 10px;
    text-align: right;
  }

  &-operator {
    // display: none;
    .el-icon {
      margin-left: 10px;

      &:hover {
        color: var(--color-primary);
      }
    }
  }

  &-info {
    display: flex;

    &__content {
      flex: 1;
      word-break: break-word;
    }
  }
}

.df {
  display: flex;
}

.df-alc-jcsb {
  display: flex;
  height: 20px;
  align-items: center;
  justify-content: space-between;
}

.detail-info {
  &-item {
    display: flex;
    margin-bottom: 18px;
    line-height: 32px;
  }

  &__label {
    width: 80px;
    padding-right: 12px;
    font-size: var(--el-form-label-font-size);
    font-weight: 700;
    color: var(--el-text-color-regular);
    text-align: right;
  }
}

.issue {
  &-user {
    margin-right: 20px;
  }

  &-content {
    flex: 1;
    word-break: break-word;
  }
}
</style>
